<template>
  <div class="majorEquipment h100">
    <el-row class="h100">
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header">设备管理单位</div>
          <template v-for="i in equipmentItem">
            <div
              :class="{
                textList: true,
                clickTextList: clickText == i.deptManageName,
              }"
              :key="i.deptManage"
              @click="equipment(i)"
            >
              {{ i.deptManageName }}
            </div>
          </template>
        </div>
      </el-col>
      <el-col :span="12" class="h100">
        <div class="text-border">
          <div class="text-header">设备</div>
          <div v-if="equipmentShow">
            <div class="table-input">
              <el-select
                :disabled="true"
                v-model="value"
                placeholder="请选择"
                class="tableInputLeft"
                @change="searchInfo"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-autocomplete
                v-model="filterText"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入名称筛选"
                :trigger-on-focus="false"
                @select="handleSelect"
                class="tableInputRight"
              ></el-autocomplete>
            </div>
            <template>
              <el-table
                border
                ref="multipleTable"
                :data="tableData"
                class="table"
                @row-click="rowClick($event)"
                @select="select"
                @select-all="selectAll"
              >
                <el-table-column v-if="!isRadio" type="selection" width="55">
                </el-table-column>
                <el-table-column v-if="isRadio" label="设备名称" align="center">
                  <template slot-scope="scope">
                    <el-radio
                      class="w100 radio"
                      :label="scope.row.equipmentId"
                      v-model="radio.equipmentId"
                      @change.native="getCurrentRow(scope.row)"
                    >
                      {{ scope.row.equipmentName }}</el-radio
                    >
                  </template>
                </el-table-column>
                <el-table-column v-else label="设备名称" align="center">
                  <template slot-scope="scope">{{
                    scope.row.equipmentName
                  }}</template>
                </el-table-column>
              </el-table>
              <div class="kr-table-pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="searchForm.page"
                  :page-sizes="paginationObj.pageSizes"
                  :page-size="searchForm.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalNumber"
                ></el-pagination>
              </div>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header">已选</div>
          <div class="clearF" v-if="isRadio">
            <div class="select-multiple">
              <label class="select-text">{{ this.radio.equipmentName }}</label>
              <i
                v-show="this.radio.equipmentName"
                @click="delItem()"
                class="el-icon-circle-close select-icon-close"
              ></i>
            </div>
          </div>
          <div class="clearF" v-else>
            <div v-for="(item, index) in choseData" :key="item.id">
              <div class="select-multiple">
                <label class="select-text">{{ item.equipmentName }}</label>
                <i
                  v-show="item.equipmentName"
                  @click="removeChose(item, index)"
                  class="el-icon-circle-close select-icon-close"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  queryDispatchAlldept, //设备管理单位
  queryBaseList, //设备
} from "@/api/operationManagement/dispatchManagement";
export default {
  props: {
    seleteSetting: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isRadio: true,
      choseData: [], // 多选主要设备已选数据
      equipmentName: "",
      disSearch: false,
      restaurants: [],
      equipmentShow: false,
      search: "",
      equipmentItem: [], // 设备管理单位
      clickText: "", // 设备管理单位背景
      deptManageData: {},
      tableData: [], // 设备
      filterText: "",
      options: this.$store.getters["dirtData"]("dispatch_type"),
      value: "",
      radio: { equipmentName: "" }, // 选中数据
      searchForm: {
        //搜索的表单数据
        page: 1,
        pageSize: 10,
      },
      //分页对象
      paginationObj: {
        pageSizes: [10, 30, 50, 100],
      },
      //表格总数
      totalNumber: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 点击行
    rowClick(row) {
      if (!this.isRadio) {
        let index = this.choseData.findIndex((item) => {
          return item.equipmentId == row.equipmentId;
        });
        if (index == -1) {
          this.toggleSelection(row, true);
          let obj = {
            equipmentId: row.equipmentId,
            equipmentName: row.equipmentName,
          };
          this.choseData.push(obj);
        } else {
          this.toggleSelection(row, false);
          this.choseData.splice(index, 1);
        }
      }
    },
    // 是否选中
    select(selection, row) {
      let selected = selection.length && selection.indexOf(row) !== -1;
      if (selected) {
        // 选中
        let obj = {
          equipmentId: row.equipmentId,
          equipmentName: row.equipmentName,
        };
        this.choseData.push(obj);
      } else {
        // 取消选择
        let index = this.choseData.findIndex((item) => {
          return item.equipmentId == row.equipmentId;
        });
        this.choseData.splice(index, 1);
      }
    },
    selectAll(selection) {
      if (selection.length) {
        this.tableData.forEach((item) => {
          let flag = this.choseData.find((row) => {
            return row.equipmentId == item.equipmentId;
          });
          if (!flag) {
            this.select(selection, item);
          }
        });
      } else {
        this.tableData.forEach((item) => {
          this.select(selection, item);
        });
      }
    },
    // 移除已选
    removeChose(item, index) {
      this.choseData.splice(index, 1);
      if (this.tableData.length) {
        let obj = this.tableData.find((rows) => {
          return rows.equipmentId == item.equipmentId;
        });
        if (obj) {
          this.toggleSelection(obj, false);
        }
      }
    },
    // 多选-已选添加/移除
    toggleSelection(row, flag) {
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(row, flag);
      });
    },
    init() {
      this.getMajorEquipment();
      let {
        equipment,
        equipmentId,
        equipmentName,
        deptManage,
        deptManageName,
        equipmentType,
        disSearch,
      } = this.seleteSetting;
      this.isRadio = this.seleteSetting.radio;
      this.choseData = this.seleteSetting.choseData || [];
      let row = {
        equipmentId,
        equipment,
        equipmentName,
        deptManage,
        deptManageName,
      };
      this.getCurrentRow(row);
      this.search = {
        equipmentType: equipmentType || "",
      };
      if (this.search.equipmentType) {
        this.value = this.search.equipmentType;
        this.disSearch = disSearch ? true : false;
      }
    },
    searchInfo(val) {
      this.search = { equipmentType: val };
      this.getEquipmentData();
    },
    // 返回选中数据
    getSeleteData() {
      if (this.isRadio) {
        return this.radio;
      } else {
        return this.choseData;
      }
    },
    // 设备管理单位列表
    async getMajorEquipment() {
      await queryDispatchAlldept().then((res) => {
        if (res.code == 200) {
          this.equipmentItem = res.data || [];
        }
      });
    },
    // 点击设备管理单位
    equipment(i) {
      this.equipmentShow = true;
      this.clickText = i.deptManageName;
      this.deptManageData = i;
      this.getEquipmentData();
    },
    // 单选数据改变
    getCurrentRow(row) {
      this.radio = {};
      this.radio.equipmentId = row.equipmentId;
      this.radio.equipmentName = row.equipmentName;
      this.radio.equipmentType = row.equipmentType || "";
      this.radio.deptManage = row.deptManage || "";
      this.radio.deptManageName = row.deptManageName || "";
    },
    // 单选-已选移除
    delItem() {
      this.radio = {};
    },
    // 查询列表信息
    async getEquipmentData() {
      let data = Object.assign(
        { equipmentName: this.equipmentName },
        this.search,
        this.searchForm,
        this.deptManageData
      );
      await queryBaseList(data).then((res) => {
        this.tableData = res.data.list || [];
        if (this.choseData.length && this.tableData.length) {
          this.tableData.forEach((item) => {
            this.choseData.forEach((rows) => {
              if (item.equipmentId == rows.equipmentId) {
                this.toggleSelection(item, true);
              }
            });
          });
        }
        this.totalNumber = res.data.total || 0;
      });
    },
    // 表格页显示数量改变
    handleSizeChange(val) {
      this.searchForm.page = 1;
      this.searchForm.pageSize = val;
      this.getEquipmentData();
    },
    // 表格页码改变
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getEquipmentData();
    },
    querySearchAsync(queryString, cb) {
      let data = Object.assign(
        { equipmentName: queryString },
        this.search,
        this.searchForm,
        this.deptManageData
      );
      queryBaseList(data)
        .then((res) => {
          if (res.code == 200) {
            for (let i of res.data.list) {
              i.value = i.equipmentName; //将想要展示的数据作为value
            }
            //大小写匹配
            let restaurants = [...res.data.list];
            var results = queryString
              ? restaurants.filter(this.createStateFilter(queryString))
              : restaurants;
            cb(results);
          }
        })
        .catch((error) => {
          this.$message.error(error.description);
        });
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    // 点击搜索结果
    handleSelect(item) {
      this.equipmentName = item.equipmentName;
      this.getEquipmentData();
    },
  },
};
</script>
<style  lang="less" scoped>
.majorEquipment {
  .text-border {
    position: relative;
    height: 600px;
    margin: 5px;
    border: 1px #ebebeb solid;
    .text-header {
      height: 35px;
      line-height: 35px;
      padding-left: 14px;
      border-bottom: 1px #ebebeb solid;
      text-align: left;
      font-weight: 700;
      color: #666;
    }
    .text-header:first-child {
      margin-bottom: 15px;
    }
    .table-input {
      width: 95% !important;
      margin: 0 auto;
      .tableInputLeft {
        float: left;
        width: 35%;
      }
      .tableInputRight {
        float: right;
        width: 60%;
      }
      .tableInputLeft,
      .tableInputRight {
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        margin-bottom: 15px;
      }
      /deep/ .el-select .el-input__inner,
      /deep/ .el-input__icon,
      /deep/ .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
    }
    .clearF::after {
      content: "";
      display: table;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .select-multiple {
      display: flex;
      justify-content: space-between;
      .select-text {
        margin-left: 10px;
        height: 23px;
        line-height: 12px;
      }
      .select-icon-close {
        margin-right: 10px;
      }
    }
    .el-pagination {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
  .textList {
    margin: 0 10px;
    padding-left: 22px;
    height: 45px;
    line-height: 45px;
    text-align: left;
  }
  .textList:hover,
  .clickTextList {
    background: #d5e4fd;
    color: #2c77f4;
  }
  /deep/ .el-table__body tr.current-row > td {
    background: #d5e4fd;
  }
  .is-checked {
    position: relative;
    left: -10px;
    padding-left: 10px;
    background: #d5e4fd;
  }
  /deep/ .el-radio__input {
    float: left;
    height: 40px;
    line-height: 40px;
  }
  /deep/ .el-radio__label {
    display: block;
    height: 40px;
    line-height: 40px;
  }
  /deep/ .table {
    width: 95% !important;
    margin: 0 auto;
    max-height: 451px;
    overflow-y: auto;
  }
}
</style>